<template>
    <el-card style="max-width: 480px">
    <template #header>
      <div class="card-header">
        <span>江西省补贴性线上职业技能培训管理平台账号</span>
      </div>
    </template>
    <p class="text item">刷课账号: <el-input v-model="bindInfo.username" style="width: 240px" placeholder="Please input" /></p>
    <p class="text item">刷课密码: <el-input v-model="bindInfo.password" style="width: 240px" placeholder="Please input" /></p>
    <template #footer>
        绑定信息状态: 
        <el-tag type="danger" v-show="bindFlag == false">未绑定</el-tag>
        <el-tag type="success" v-show="bindFlag  == true">已绑定</el-tag>
    </template>

    <el-button plain @click="dialogVisible = true">
        绑定
  </el-button>
  <el-button plain @click="delAllbingInfo">
        解除所有绑定信息
  </el-button>
  </el-card>

  <el-dialog
    v-model="dialogVisible"
    title="提示"
    width="500"
    :before-close="handleClose"
  >
    <span>您正在修改平台信息....</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="bindInfoClick">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessageBox } from 'element-plus'
import { setIdentity, findIdentity, delIdentity } from '@/axios/index'
import { ElMessage } from 'element-plus'

const userInfo:any = localStorage.getItem('userInfo')
const parseInfo = JSON.parse(userInfo)
if (parseInfo === null){
    const router = useRouter()
    localStorage.removeItem('userInfo')
    localStorage.removeItem('token')
    localStorage.removeItem('sysInfo')
    router.replace({name:"login"})
}
const bindInfo = reactive({
      username: "",
      password: ""
    });
const dialogVisible = ref(false)
const bindFlag = ref(false)
const sysInfo:string|null = localStorage.getItem('sysInfo') || null

if(sysInfo!==null){
    const pSysInfo = JSON.parse(sysInfo)
    bindInfo.username = pSysInfo['idCar']
    bindInfo.password = pSysInfo['password']
    bindFlag.value = true
}

const bindInfoClick = async ()=>{
    const userInfo:any = localStorage.getItem('userInfo')
    const parseInfo = JSON.parse(userInfo)
    const dataInfo = {
        'id': parseInfo['id'],
        'idCar': bindInfo.username,
        'password': bindInfo.password
    }
    const {data} = await setIdentity(dataInfo)
    if (data.status === 200){
        const token = data.data.data
        bindFlag.value = true
        dialogVisible.value = false
        const newInfo = {...dataInfo,"token": token}
        localStorage.setItem('sysInfo', JSON.stringify(newInfo))
        ElMessage.success(data.data.message)
    }else{
        ElMessage.error(data.data.message)
    }
    
}

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确定关闭次对话框')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}

const delAllbingInfo = async ()=>{
    const userInfo:any = localStorage.getItem('userInfo')
    const parseInfo = JSON.parse(userInfo)
    const dataInfo = {
        'id': parseInfo['id'],
    }
    const {data} = await delIdentity(dataInfo)
    if (data.status === 200){
        localStorage.removeItem('sysInfo')
        ElMessage.success(data.data.message)
        bindFlag.value = false
    }else{
        ElMessage.error(data.data.message)
    }
}



</script>

